<div class="edit-tab-with-sidemenu">
  <aside class="edit-sidemenu-aside">
    <ul class="edit-sidemenu">
      <li ng-repeat="style in editor.panel.styles" ng-class="{active: editor.activeStyleIndex === $index}">
        <a ng-click="editor.activeStyleIndex = $index">{{style.pattern || '新规则'}}</a>
      </li>
      <li>
        <a class="pointer" ng-click="editor.addColumnStyle()">
          <i class="fa fa-plus"></i>&nbsp;添加
        </a>
      </li>
    </ul>
  </aside>

  <div class="edit-tab-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">

    <div class="section gf-form-group">
      <h5 class="section-heading">选项</h5>
      <div class="gf-form-inline">
        <div class="gf-form">
          <label class="gf-form-label width-13">应用于命名的列</label>
          <input type="text" placeholder="名称或正则表达式" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'使用 /my.*regex/ 语法指定正则表达式'"
            bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 ng-model-onblur
            data-placement="right">
        </div>
      </div>
      <div class="gf-form" ng-if="style.type !== 'hidden'">
        <label class="gf-form-label width-13">列标题</label>
        <input type="text" class="gf-form-input width-13" ng-model="style.alias" ng-change="editor.render()" ng-model-onblur placeholder="覆盖标题标签">
      </div>
      <gf-form-switch class="gf-form" label-class="width-13" label="将值渲染为链接" checked="style.link" change="editor.render()"></gf-form-switch>
    </div>

    <div class="section gf-form-group">
      <h5 class="section-heading">类型</h5>

      <div class="gf-form">
        <label class="gf-form-label width-11">类型</label>
        <div class="gf-form-select-wrapper width-16">
          <select class="gf-form-input" ng-model="style.type" ng-options="c.value as c.text for c in editor.columnTypes" ng-change="editor.render()"></select>
        </div>
      </div>
      <div class="gf-form" ng-if="style.type === 'date'">
        <label class="gf-form-label width-11">日期格式</label>
        <gf-form-dropdown model="style.dateFormat" css-class="gf-form-input width-16" lookup-text="true"
        	get-options="editor.dateFormats" on-change="editor.render()" allow-custom="true">
        </gf-form-dropdown>
      </div>

      <div ng-if="style.type === 'string'">
        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="清理 HTML" checked="style.sanitize"
          change="editor.render()"></gf-form-switch>
      </div>
      <div ng-if="style.type === 'string'">
        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="保留格式" checked="style.preserveFormat"
          change="editor.render()"></gf-form-switch>
      </div>

      <div ng-if="style.type === 'number'">
        <div class="gf-form">
          <label class="gf-form-label width-11">单位</label>
          <div class="gf-form-dropdown-typeahead width-16" ng-model="style.unit" dropdown-typeahead2="editor.unitFormats" dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)"></div>
        </div>
        <div class="gf-form">
          <label class="gf-form-label width-11">小数点</label>
          <input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()"
            ng-model-onblur>
        </div>
      </div>
    </div>

    <div class="section gf-form-group" ng-if="style.type === 'string'">
      <h5 class="section-heading">值映射</h5>
      <div class="editor-row">
        <div class="gf-form-group">
          <div class="gf-form">
            <span class="gf-form-label">
              类型
            </span>
            <div class="gf-form-select-wrapper">
              <select class="gf-form-input" ng-model="style.mappingType"
                      ng-options="c.value as c.text for c in editor.mappingTypes" ng-change="editor.render()"></select>
            </div>
          </div>
          <div class="gf-form-group" ng-if="style.mappingType==1">
            <div class="gf-form" ng-repeat="map in style.valueMaps">
              <span class="gf-form-label">
                <i class="fa fa-remove pointer" ng-click="editor.removeValueMap(style, $index)"></i>
              </span>
              <input type="text" class="gf-form-input max-width-6" ng-model="map.value" placeholder="值" ng-blur="editor.render()">
              <label class="gf-form-label">
                <i class="fa fa-arrow-right"></i>
              </label>
              <input type="text" class="gf-form-input max-width-8" ng-model="map.text" placeholder="文本" ng-blur="editor.render()">
            </div>
            <div class="gf-form">
              <label class="gf-form-label">
                <a class="pointer" ng-click="editor.addValueMap(style)"><i class="fa fa-plus"></i></a>
              </label>
            </div>
          </div>
          <div class="gf-form-group" ng-if="style.mappingType==2">
            <div class="gf-form" ng-repeat="rangeMap in style.rangeMaps">
              <span class="gf-form-label">
                <i class="fa fa-remove pointer" ng-click="editor.removeRangeMap(style, $index)"></i>
              </span>
              <span class="gf-form-label">从</span>
              <input type="text" ng-model="rangeMap.from" class="gf-form-input max-width-6" ng-blur="editor.render()">
              <span class="gf-form-label">到</span>
              <input type="text" ng-model="rangeMap.to" class="gf-form-input max-width-6" ng-blur="editor.render()">
              <span class="gf-form-label">文本</span>
              <input type="text" ng-model="rangeMap.text" class="gf-form-input max-width-8" ng-blur="editor.render()">
            </div>
            <div class="gf-form">
              <label class="gf-form-label">
                <a class="pointer" ng-click="editor.addRangeMap(style)"><i class="fa fa-plus"></i></a>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="section gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
      <h5 class="section-heading">阈值</h5>
      <div class="gf-form">
        <label class="gf-form-label width-8">阈值
          <tip>用英文逗号分隔的值</tip>
        </label>
        <input type="text" class="gf-form-input width-10" ng-model="style.thresholds" placeholder="50,80" ng-blur="editor.render()"
          array-join>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-8">颜色模式</label>
        <div class="gf-form-select-wrapper width-10">
          <select class="gf-form-input" ng-model="style.colorMode" ng-options="c.value as c.text for c in editor.colorModes" ng-change="editor.render()"></select>
        </div>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-8">颜色</label>
        <span class="gf-form-label">
          <color-picker color="style.colors[0]" onChange="editor.onColorChange($index, 0)"></color-picker>
        </span>
        <span class="gf-form-label">
          <color-picker color="style.colors[1]" onChange="editor.onColorChange($index, 1)"></color-picker>
        </span>
        <span class="gf-form-label">
          <color-picker color="style.colors[2]" onChange="editor.onColorChange($index, 2)"></color-picker>
        </span>
        <div class="gf-form-label">
          <a class="pointer" ng-click="editor.invertColorOrder($index)">颠倒</a>
        </div>
      </div>
    </div>

    <div class="section gf-form-group" ng-if="style.link">
      <h5 class="section-heading">Link</h5>
      <div class="gf-form">
        <label class="gf-form-label width-9">Url</label>
        <input type="text" class="gf-form-input width-29" ng-model="style.linkUrl" ng-blur="editor.render()" ng-model-onblur data-placement="right">
        <info-popover mode="right-absolute">
          <p>指定 URL（相对 URL 或绝对 URL）</p>
          <span>
            使用特殊变量指定单元格的值：
            <br>
            <em>${__cell}</em> 指向当前的单元格值
            <br>
            <em>${__cell_n}</em> 指向当前行中的第 N 列的值。列的索引从 0 开始。例如，
            <em>${__cell_1}</em> 指向第二列的值。
          </span>
        </info-popover>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-9">工具提示</label>
        <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
          data-placement="right">
        <info-popover mode="right-absolute">
          <p>为链接的工具提示指定文本。</p>
          <span>
            当用户将指针悬停在带链接的单元格上时，会出现此标题。使用与 URL 相同的变量。
          </span>
        </info-popover>
      </div>
      <gf-form-switch class="gf-form" label-class="width-9" label="在新标签页中打开" checked="style.linkTargetBlank"></gf-form-switch>
    </div>

    <div class="clearfix"></div>

    <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
      <i class="fa fa-trash"></i> 删除规则
    </button>
    <br />
    <br />

  </div>
